<template>
    <div class="app">
        <h4 class="page-header">{{title}}</h4>
<div class="list-group " v-for="item in in_theaters.subjects">
    <router-link v-bind="{to:'/movie/'+item.id}"  class="list-group-item">
        <div class="media">
            <div class="media-left">
                <img class="media-object"  alt="" v-lazy="item.images.small">
            </div>
            <div class="media-body" >
                <span class="badge pull-right">{{item.rating.average}}</span>
                <h3 class="media-heading ">{{item.title}}</h3>
                <p>类型：<span>{{item.genres | shuzufmt}}</span>&nbsp;&nbsp;&nbsp;&nbsp;上映年份：<span >{{item.year}}</span></p>
                <p>导演：<span v-for="directors in item.directors">{{directors.name}}&nbsp;&nbsp;</span> </p>
                <p>主演：<span v-for="casts in item.casts" >{{casts.name}}&nbsp;&nbsp;</span>
                </p>
            </div>
        </div>
    </router-link>
</div>
			<!--提示加载按钮-->
			<button type="button" class="mui-btn mui-btn-block mui-btn-outlined" @click="clickMore" v-if="isShow">{{jiazai}}</button>
    </div>

</template>

<script>
import common from '../common/common.js';

export default{
    name:'in_theaters',
    data(){
        return {
            isShow:false,
            in_theaters:{},
            title:'正在加载...',
            pageCount:5,//页面显示总数
            jiazai:'点击加载更多信息',
        }
    },
    methods: {
        getInTheaters(){
            let url = common.apihost + '/v2/movie/in_theaters';
            this.$http.jsonp(url,{
              params:{
                count:this.pageCount,
                apikey:common.apikey,
              },
                headers:{},emulataJSON:true
            }).then(res=>{
              this.in_theaters = res.body;
              this.in_theaters.total = 5;
              this.title = this.in_theaters.title;
            })
        },
        clickMore(){
            let that = this;
            that.pageCount += 5;
            that.getInTheaters();
            that.jiazai = '正在加载...';
            setTimeout(()=>{
                that.jiazai = '点击加载更多信息';
            },2000)
        },
        shina(){
            setTimeout(()=>{
                this.isShow = true;
            },1500);
        }
    },
    created(){
        this.getInTheaters();
        this.shina();
    }
}
</script>

<style>

</style>